<template>
	<view class="pronumbox" >
		<u-number-box v-model="dataItem.numvalue" min="0" max="50" @change="numChange">
			<view slot="minus" class="minus numbtn" :class="dataItem.numvalue<=0?'none':''">
				<u-icon name="minus" size="15" color="#ccc"></u-icon>
			</view>
			<text slot="input" class="input" :class="dataItem.numvalue<=0?'none':''">{{dataItem.numvalue}}</text>
			<view slot="plus" class="plus numbtn">
				<u-icon name="plus" color="#FFFFFF" size="15"></u-icon>
			</view>
		</u-number-box>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex"
	export default {
		name: "numbox",
		props: {
			item: { //子组件没有权限去改父组件
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				numValue: 0,
				dataItem: this.item,
				MsgList: {
					type: "success",
					message: "获取验证码成功"
				},
			};
		},
		methods: {
			...mapMutations(["setCarList"]),
			fillMsg(type, msg) { //提示消息的赋值
				this.MsgList.type = type;
				this.MsgList.message = msg;
				this.$refs.uToast.show({
					...this.MsgList
				})
			},
			numChange(e) {
				console.log("步进器", e);
				console.log("点击步进器:", this.item);
				this.setCarList({
					item: this.item,
					num: e.value //步进器的值
				});
			}
		}
	}
</script>

<style lang="scss">
	.pronumbox {
		.numbtn {
			width: 40rpx;
			height: 40rpx;
			@include flex-box-set();
		}

		.minus {
			border: 1rpx solid #ccc;
		}

		.plus {
			background: $brand-theme-color-aux;
		}

		.input {
			width: 60rpx;
			height: 40rpx;
			font-size: 26rpx;
			color: #888;
			@include flex-box-set();
		}

		.none {
			display: none;
		}
	}
</style>
